The Infigo Form Builder

An introduction to Infigo's Form Builder functionality, along with its expansive capabilities, built right into MegaEdit.

Infigo Academy Webinar | February 2024

February 2024 sees an Infigo Academy webinar introducing this topic.

This webinar will focus on the core capabilities of the Infigo Form Builder, in an effort to give you a snapshot of its huge potential.

Please bear in mind this webinar and this web page will demonstrate these capabilities on very basic products.

Additional features exist or are in development which will not be demonstrated in this webinar.

What is the Infigo Form Builder?

An exciting piece of development from Infigo, giving you the ability to design user-facing forms from within MegaEdit, using a new minimalist UI.

<<< Configure your forms using the new UI.

Create a user-facing form for a sleek and streamlined customer experience >>>

Simplifies the process of configuring variable product templates in MegaEdit.

Reduces the time taken to produce variable product tmeplates.

Introduces the ability to produce customer-facing forms in MegaEdit (similar to Invent’s capabilities).

Extensive capabilities for more advanced users.

FAQ

When will the Infigo Form Builder be released?

A release date has not yet been confirmed, however this functionality is in the advanced stages of development.
News of its release will be announced in the monthly What's New email shot. Keep an eye out!

Has the Infigo Form Builder been renamed?

As of the time of the webinar, "Infigo Form Builder" is a temporary name being given to this functionality. You may also see reference to a "Refactored Form Builder", which is the same functionality.

It may be renamed closer to release. This information will be shared via the Infigo Academy.

Will you provide training material?

Content is being created and will be shared via the Infigo Academy. This will be made available upon release.

If you already have access to the Infigo Form Builder due to a project with our front end team, please get in contact with the Academy who can provide special access to any existing training material.

Will you provide script config examples?

Navigating the script config can be understandably daunting for non-web developers.

Via the Infigo Academy and our Help Centre, we will provide example config scripts to help to utilise the Infigo Form Builder to its fullest potential.

These example script configs will be released at the same time as the main body of functionality.

What experience do I need to use the Infigo Form Builder?

Use of the Infigo Form Builder does require some prior experience with the fundamentals of MegaEdit. You can learn about those in our MegaEdit Crash Course on the Infigo Academy (link below).

How does the Infigo Form Builder differ from Invent?

The Infigo Form Builder contains many similarities with Infigo Invent, our plugin for Adobe InDesign.

The primary difference, the Form Builder is fully contained within MegaEdit, with no need to install plugins to third party software such as InDesign.

There are a number of other differences between the two offerings. Generally speaking, if you're looking for a straightforward product template that's easy to configure and use, Invent or the Infigo Form Builder are both viable options and it's down to personal choice.

For those looking to take their product builds to the next level in terms of configuration capabilities and the eventual experience of your end user, consider the Infigo Form Builder as your most effective tool. The Infigo Form Builder contains numerous extended capabilities in different areas over the Invent plugin, however the caveat (for the moment) is to be comfortable writing script config.

Form Builder Modes

The Infigo Form Builder contains several modes.

Built for specific scenarios, these control how the Form Builder operates and how end users interact with it.

"Form" mode will be used for the majority of this webinar. It is the default selection and can be used to demonstrate most of the functionality.

Modes include:

 

Guided Mode

The guided mode is a work in progress and cannot be fully demoed at this time.

It will enable the ability to provide your end users with a step by step guide when ordering their customised products. This ensures every step is complete and maximises user friendliness and simplicity.

Set up a product for the Infigo Form Builder

Setting up a product is virtually identical to that of a regular MegaEdit product, besides ensuring the relevant script is enabled.

Ensure you have the usual mandatory canvas, stock and output type assigned. In addition, apply any additional resource categories such as fonts, cliparts, etc.

Note: It is possible to import your layout and resources from Invent via a .mex file, then convert to using the Infigo Form Builder functionalities. Advanced Invent configuration such as variables and logic will not be retained.

Configuring pages

Individual pages can be configured within the Infigo Form Builder to accept customised names, along with allowing background and layout selection from within the user-facing form itself.

Configuring fields

Configuring fields is handled using the admin-only Custom Tab, available on the MegaEdit left pane when the Infigo Form Builder script is active.

All fields are listed, with easy configuration using a series of simple inputs and toggles.

Control how your end users can interact with this field. Ranging from full interactivity to form-only interaction.

When configured, automatically creates a relevant input on the user-facing form (right side).

Build a template in minutes

These tools allow you to configure a variable, simple to use, product template in a matter of minutes.

All done from within the MegaEdit interface, there's no need to jump between applications.

Introducing Infigo Form Builder script config

The potential of the Infigo Form Builder opens up even more with the capability to configure the script.

Whilst this requires the copying and modification of some JSON code, we promise (for the non-developers amongst you) that it is nowhere near as intense at it looks at first glance.

Accessing script config

Configuration of the script can be done at both a global level and at a product level.

So for example, if you have some configuration you wish to share between products, you can input it just once on the global script config.

For something which is product specific, this can be input on the product level instance of the script. This can be used to add to or to overwrite sections of the global script.

The order of operations for the Infigo Form Builder script goes:


General config | The base provision of the Infigo Form Builder script. This controls the general behaviour of this functionality.

Global level config | Code will override matching sections in the default config. So, if the same varible is specified in both with slightly different settings, the global version will be used.

Product level config | Takes priority. Code will override matching sections in global or default.

 

Variables

A variable and its range of associated settings can be created within the script config.

Within a product template itself, the variable name (surrounded by some predefined characters) can be input into text fields. This automatically generates an entry on the user-facing form, allowing us to enter custom text in specific areas of our artwork simply by inputting data on the form.

Multiple variables can be placed into a single text field. What's more, we can enable rich text formatting, allowing us to retain differently formatted variables within a single text field.

  "textVariablesLookup": {
    "Name": {
      "label": "Name",
      "value": "LoadUserData:FirstName,LastName",
      "input": "TextField",
      "uiPlacehodler": "Jane Doe",
      "preFix": "",
      "suFix": "",
      "helpText": "Enter your name here"
    },

Formatting Rules

"Formatting rules" allow you to create reusable code specifying the way in which the contents of a variable or an entire field should be formatted.

This includes specifying a type, such as a number, where only numeric inputs will be accepted into a field.

It also allows for the specification of Regex rules which will automatically reformat a string of characters as necessary. For example, a certain number of digits could automatically reformat into a phone number with spaces and dashes.

  "formattingRules": [
    {
      "tag": "Format_Phone",
      "type": "number",
      "regex": "(\\d{3})(\\d{3})(\\d{4})",
      "parts": "($1) $2-$3"
    }
  ],

Predefined Text

Predefined text allows us to input a range of options for use in our Form Builder enabled products. These sets of options will appear as a dropdown list on the user-facing form.

We can either manually populate the options as part of the script config (best for short lists of options), or we can input csv documents into the Infigo system which we then reference as part of the script config.

This part of the config also allows for a "Custom" option to be specified (if required), where the user will then be able to manually enter a value instead of picking from the provided list.

Manually defined options 

"predefinedText": [
    {
      "customTargetTag": "PredefinedExample1",
      "options": [
        {
          "title": "Option1",
          "value": "ResultingText1"
        },
        {
          "title": "Option2",
          "value": "ResultingText2"
        },
        {
          "title": "Custom",
          "value": ""
        }
      ]
    },

Options populated from CSV


    {
      customTargetTag: 'CountryCodes',
      useCSV: true,
      csvPath: 'codes.csv',
      useDialog: false,
      showSearch: false,
      dialogTitle: "Select a calling code",
    options: []
    }
  ],

vCard generation

The Infigo Form Builder has the ability to generate QR codes for use as a vCard. 

A vCard is a digital file format used to store contact information such as name, address, phone number, and email address. It is commonly used for exchanging contact information electronically, often via email or over the internet.

Business cards are a perfect use case for these, where a recipient can scan the QR code to get all of the cards details saved directly to their phone.

This is done by mapping areas of your Infigo product (such as specific variables or entire fields) to expected inputs from the expected vCard format. The Infigo Academy will provide details on accomplishing this.

  "vCardParts": [
    {
      "title": "Name:",
      "property": "N",
      "include": true,
      "values": [
        {
          "source": "variable",
          "value": "Name"
        }
      ]
    },
    {
      "title": "Formatted Name:",
      "property": "FN",
      "include": true,
      "values": [
        {
          "source": "variable",
          "value": "Name"
        }
      ]
    },

Additional Features

Layer support

The Infigo Form Builder includes layer support, allowing you to fix fields into a specified z position.

By default there is a provision for 5 background and 5 mask layers, however this number can be increased within the script config.

This is useful for giving you complete control over where user-created text or field images will appear in the z-axis order. Backgrounds will always stay as backgrounds and mask layers will always stay on top of added content.

Force to fit

The Infigo Form Builder UI comes with the capability to easily specify any field to fit to either the bleed, page or custom pre-set margins.

This persists even with a change of canvas, meaning multiple sizes and aspect ratios can be provided with the field(s) always fitting perfectly.

In addition, it's possible to specify a border around these fit fields, ensuring a consistent gap even when the canvas is altered.

And much more

The examples in the webinar and on this page cover the fundamental capabilities of the Infigo Form Builder.

When used together, combined with existing MegaEdit capabilities or additional styling is applied, it is possible to create some stunning user experiences with variable products.

The Infigo Form Builder is undergoing consistent development to both refine and extend its features, so you can expect this functionality to improve even further in the future.